[Day 14] 進入JavaScript，認識瀏覽器中的JS

2021 iThome 鐵人賽

DAY 14

自我挑戰組

邊工作邊進行前端學習之旅系列第 14 篇

13th鐵人賽

Eva

2021-09-14 09:34:03

757 瀏覽

分享至

前言

前面幾天說了很多CSS\SCSS的介紹和學習方式，終於要踏入JS啦，邊學習的過程也可以發現他要學習的有基礎語法、觀念有很多，時常學了新的，忘了舊的，剛好趁著鐵人賽能夠再整理下筆記，藉此複習一下。
接下來的文章，多是以JS為主，主要涵蓋基礎觀念、實作練習，文章內也還是會放一些自己的學習心得、方式。

如何開始認識 JavaScript

如同前面幾天文章介紹，會到 MDN 來查閱相關名詞。在 MDN - JavaScript 是什麼? 介紹了JS 可以做什麼事、它的編譯方式、如何載入等等。
另外，搭配今天的文章主題，也可以觀看彭彭老師的網頁前端工程入門：HTML DOM

來談談DOM

因為 DOM 是 JS 處理網頁的關鍵，所以把它放在最前面來認識。
DOM 全名為 Document Object Model 中文翻譯為文件物件模型

KURO 老師:
DOM 是一個將 HTML 文件以樹狀的結構來表示的模型，而組合起來的樹狀圖，我們稱之為「DOM Tree」。
Huli:瀏覽器提供該橋樑，讓我們用JS去改面畫面的東西

抓取 HTML 文件

DOM API : DOM 提供描述 HTML 或 XML 文件的邏輯架構與提供應用程式的撰寫介面，可以利用此 API 可以建立文件內容、查看文件結構、以及添加、修改、和刪除文件的元件與內容

那JS要如何去抓取到文件中某標籤呢？以下我們將分別介紹5種方法，來取得相應的資料。

1. `getElementsByTagName` : 抓取 HTML 中某標籤的元素


 <body>
<div>
    hello~

  </div>
  <div>
    yo!
  </div>
  <script>

    const elements = document.getElementsByTagName('div');
    console.log(elements);
  </script>
  </body>

抓到 2 個 div

2. `getElementsByClassName`: 抓取 html 中某 class 元素

有好幾個相同名稱的class，會一並抓取


<body>
 <h1>DOM
 </h1>
 <div class="block1">
   hello~

 </div>
 <div>
   yo!
 </div>
 <script>

   const elements = document.getElementsByClassName('block1');
   console.log(elements);
 </script>
</body>

抓到 class 為 block1 的div

3. `getElementById` : 這是用來抓取指定 ID

* 注意：getElement 沒有加s！ 可以記得ID只有一個，所以 getElement 沒有加 s。

<body>
  <h1>DOM
  </h1>
  <div class="block1">
    hello~

  </div>
  <div id="myyo">
    yo!
  </div>
  <script>
    const elements = document.getElementById('myyo');
    console.log(elements);
  </script>
</body>

4. querySelector: 後面接的是css選擇器

只會針對元素的第一筆資料，其他並不會被選入這時候可以使用
選擇tag標籤：(div)：注意：使用此方式當html有多個div，他只會選擇到第一個符合的
選擇cass : (.calssName)
選擇id : (#idName)

5. `querySelectorAll` : 可以選取多個元素

<body>
  <h1>DOM
  </h1>
  <div class="block1">
    hello~

  </div>
  <div id="myyo">
    yo!
    <a href="#">hello</a>
  </div>
  <script>

    const elements = document.querySelectorAll('div');
    console.log(elements);
  </script>

Eloquent JavaScript, 3rd Edition